<template>
	<view class="page">
		<template v-if="isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<view class="banner">
						<image class="bg" :src="web_host+detail.bg_img" mode="widthFix"></image>
						<view class="content">
							<view class="group-icon"><image src="@/static/images/group_white.png" mode="widthFix"></image></view>
							<view class="label">监测作业</view>
							<view class="name">{{detail.pro_info}}</view>
							<view class="category-list row-3">
								<navigator open-type="navigate" hover-class="none" :url="'/package_project/jc_pro/dataList/dataList?pid='+detail.id+'&uid='+userInfo.id+'&pro_type=2&memberInfo=1'" class="item">
									<view class="icon"><image src="@/static/images/datas.png" mode="widthFix"></image></view>
									<view class="text">监测数据</view>
								</navigator>
								<view class="item" @click="openMap" data-type="public">
									<view class="icon"><image src="@/static/images/mapdata.png" mode="widthFix"></image></view>
									<view class="text">数据地图</view>
								</view>
								<!-- <navigator open-type="navigate" url="/"  hover-class="none" class="item">
									<view class="icon"><image src="@/static/images/yz_export.png" mode="widthFix"></image></view>
									<view class="text">导出数据</view>
								</navigator> -->
							</view>
						</view>						
					</view>
					
					<view class="detail-wrap m-b2">
						<view class="detail-item">
							<view class="label">创建日期：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.create_time}}</view> 
								</view>		 
							</view>			
						</view> 
						<view class="detail-item">
							<view class="label">作业地址：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.address}}</view> 
								</view>		 
							</view>			
						</view> 
						<view class="detail-item">
							<view class="label">群成员：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.users.length}}人</view> 
									<!-- <view class="invite-btn" @click="share">
										<image src="@/static/images/share_while.png" mode="widthFix"></image>
										<text>邀请好友加入</text>
									</view> -->
								</view>		 
							</view>			
						</view> 
					</view>
					
					<view class="data-wrap">
						<view class="hd"><text>群成员</text></view>
						<view class="con">
							<view class="detail-wrap">
								<navigator :url="'/package_project/jc_pro/groupUserDetail/groupUserDetail?uid='+item.uid+'&pid='+item.pro_id"  open-type="navigate" hover-class="none"  class="detail-item" v-for="(item,index) in detail.users" :key="index">  
									<view class="detail-input">
										<view class="content">
											<view class="val">{{item.realname}}</view> 
										</view>				
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>	
									</view>			
								</navigator>  
							</view> 
						</view>
					</view>
				</view>
				
				<view class="footer">
					<view class="fix-wrap bottom">
						<navigator open-type="navigate" hover-class="none" :url="'/package_project/jc_pro/jcForm/jcForm?work_type=group'+'&pid='+id" class="form-lay-btn">开始作业</navigator>
					</view>
				</view> 
			</template>
			
		</template>
		
		
	</view>
</template>

<script>
	import { 
		HTTP_REQUEST_URL
	} from '@/config.js'
	import loading from '@/components/loading-more.vue'
	import {router} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: false, 
				userInfo: uni.getStorageSync('userInfo'),
				loadingState:{
					default:true
				},
				id:'',
				detail:{},
				web_host:HTTP_REQUEST_URL

			}


		},
		async onLoad(params) {	
			this.id=params.id;
			this.isLogin=await this.$loginState('check');  
			if(this.isLogin){
				this.getProsDetail();
			}
		},
		async onShow() {

		},
		methods: {
			getProsDetail:async function(){ 
				let res=await this.$api.ycj_api.groupPro({
					pid:this.id
				})  
				if(res.data.ret==0){
					this.loadingState.default=false; 
					this.detail=res.data.data;
				}
			},
			
			share:function(){
				
			},
			
			// 打开地图
			openMap:function(e){ 
				let type = e.currentTarget.dataset.type;  
				router({
					opentype:'navigate',
					url:'/pages/webview/webview',
					params:{ 					 
						pid: this.id,  
						page_type:"map",
						type: type, 
						uid: this.userInfo.id,
						all:true
						
					}
				})
				
			} 
		},
		components: {
			loading
		},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less" scoped> 
	
	.banner{
		position: relative;
		min-height: 700rpx;
		.bg{
			image{
				width: 100%;
			}
		}
		.content{
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%;
			.group-icon{
				width: 60rpx;
				margin:100rpx auto 20rpx;
				image{
					width: 60rpx;
				}
			}
			.label{
				margin-bottom: 100rpx;
				font-size: 32rpx;
				text-align: center;
				color:#fff;
			}
			.name{
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				color:#fff;
			}
		}
		
	}
	.detail-input{
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.invite-btn{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #f00;
				padding:3rpx 10rpx;
				border-radius: 8rpx;
				color:#fff;
				font-size: 30rpx;
				image{
					width: 30rpx;
				}
			}
		}
	}
	.category-list{ 
		margin-bottom: 20rpx;
		padding: 30rpx 0 0;
		.item{
			.icon{
				width: 40%!important;
			}
			.text{
				color:#fff;
			}
		}
	} 

	.data-wrap{ 
		margin: 20rpx auto;
		background: #fff; 
		overflow: hidden;
		.hd{
			padding:15rpx 20rpx;
			border-bottom:1rpx solid #ddd;
			text{
				padding-left:20rpx;
				border-left:10rpx solid #f00;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.con{ 
		}
	}
	
	
</style>
